<template>
	<view>
		<custom-nav-sq-xcx :isBack="true" :hasFixedFlag="true" bgColor="usuallyBgQy">
			<block slot="content">加入企业</block>
		</custom-nav-sq-xcx>
		<create-qy-head>
			<view class="joinQy">
				<view class="joinDec posRel">
					<view class="decTxt posRel">
						<view class="iconfont icon-aqbz"></view>
						<view>安全 | 隐私 | 高效</view>
					</view>
					<image class="joinQyImg posAbso" :src="getQyStaticFilePath('joinQy.png')"></image>
				</view>
				<view class="joinQyForm">
					<view class="formItem">
						<view class="itemTit">企业名称</view>
						<view class="itemCon disableTxt">濮阳核心文化传媒</view>
					</view>
					<view class="formItem">
						<view class="itemTit">所属部门</view>
						<picker class="itemCon"  @change="bindDepFilter" :value="depIndex" :range="depList" range-key="name">
							<text class="street" :class="[isSelDepFlag ? 'hasSel' : '']">{{depTxt}}</text>
							<text class="iconfont icon-sanjiao"></text>
						</picker>
					</view>
					<view class="formItem">
						<view class="itemTit">姓名</view>
						<view class="itemCon">
							<input type="text" class="itemInp" v-model="userName" placeholder="请输入姓名" placeholder-class="qyholderInp"/>
						</view>
					</view>
					<view class="formItem">
						<view class="itemTit">性别</view>
						<picker class="itemCon"  @change="bindSexFilter" :value="sexIndex" :range="sexList">
							<text class="street hasSel">{{sexTxt}}</text>
							<text class="iconfont icon-sanjiao"></text>
						</picker>
					</view>
					<view class="formItem">
						<view class="itemTit">联系方式</view>
						<view class="itemCon">
							<input type="tel" class="itemInp" v-model="lxMoble" placeholder="请输入联系方式" placeholder-class="qyholderInp"/>
						</view>
					</view>
					<button class="comBtn qy bigRadius">提交</button>
				</view>
			</view>
		</create-qy-head>
	</view>
</template>

<script>
	import CreateQyHead from '../createQy/components/CreateQyHead.vue'
	export default {
		components:{
			CreateQyHead
		},
		data(){
			return{
				userName:'',
				lxMoble:'',
				depList:[{name:"网络部"},{name:"人事部"}],
				isSelDepFlag:false,
				depIndex:-1,
				depTxt:'请选择所属部门',
				sexList:['男','女'],
				sexTxt:'男',
				sexIndex:0
			}
		},
		methods:{
			bindDepFilter(e){
				this.depIndex = e.detail.value;
				this.isSelDepFlag = true;
				this.depTxt = this.depList[this.depIndex].name;
			},
			bindSexFilter(e){
				this.sexIndex = e.detail.value;
				this.sexTxt = this.sexList[this.sexIndex];
			}
		}
	}
</script>
<style lang="scss">
	page{
		background: #EFF3F6;
	}
</style>
<style lang="scss" scoped>
	$radius:16rpx;
	.joinQy{
		background: #fff;
		border-radius: $radius;
		.joinDec{
			height: 70rpx;
			background: #E5EEFF;
			border-radius:$radius $radius 0 0;
			color: $pss-qy-main;
			font-size: 24rpx;
			.icon-aqbz{
				margin-right: 15rpx;
				font-size: 30rpx;
			}
			.decTxt{
				z-index: 2;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.joinQyImg{
				width: 446rpx;
				height: 52rpx;
				bottom: -16rpx;
				z-index: 1;
				left: 50%;
				margin-left: -223rpx;
			}
		}
		.joinQyForm{
			padding: 80rpx 15rpx 50rpx;
			$size:80rpx;
			.formItem{
				display: flex;
				font-size: 28rpx;
				height: $size;
				margin-bottom: 30rpx;
				.itemTit{
					width: 130rpx;
					line-height: $size;
					text-align: right;
					margin-right: 15rpx;
					color: $qy-main6;
				}
				.itemCon{
					color: $qy-main2;
					flex: 1;
					border: 1rpx solid #E5ECF6;
					border-radius: $radius;
					text-align: right;
					padding: 0 15rpx;
					line-height: $size;
					&.disableTxt,
					.street,
					.icon-sanjiao{
						color: $qy-mainb;
					}
					.hasSel{
						color: $qy-main2;
					}
				}
				.itemInp{
					height: 100%;
					border: none;
				}
			}
		}
		.comBtn{
			margin-top: 150rpx;
		}
	}
</style>